<template>
    <div class="nav" active-name="">
        <router-link to="repayment">
           <img class="active" src="./imgs/icon-b1@2x.png"/>
           <img class="noactive" src="./imgs/icon-01@2x.png"/>
            <span>快速提额</span>
        </router-link>
        <router-link to="speedcard">
            <img class="active" src="./imgs/icon-b2@2x.png"/>
            <img class="noactive" src="./imgs/icon-02@2x.png"/>
            <span>极速办卡</span>
        </router-link>
        <router-link to="consumption">
           <img class="active" src="./imgs/icon-b3@2x.png"/>
           <img class="noactive" src="./imgs/icon-03@2x.png"/>
           <span>消费神器</span>
        </router-link>
        <router-link to="partner">
            <img class="active" src="./imgs/icon-b4@2x.png"/>
            <img class="noactive" src="./imgs/icon-04@2x.png"/>
            <span>合伙人</span>
        </router-link>
        <router-link to="/" name="myhome">
            <img class="active" src="./imgs/icon-b5@2x.png"/>
            <img class="noactive" src="./imgs/icon-05@2x.png"/>
            <span>我的</span>
        </router-link>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data(){
      return{
        activeNav:true
      }
  }
}
</script>

<style lang="stylus" scoped>
    navF=1.2rem
    .nav
        position fixed
        height 6rem
        width 100%
        bottom 0
        font-size navF
        background #fff
        border-top 1px solid #f1f1f1
        padding-top .8rem
    .nav a
        display inline-block
        width 19%
        text-align center
        padding 0
    .nav a img
        display inline-block
        width 2.5rem
        height 2.5rem
        margin-bottom 0.5rem
    .nav a .noactive
        display inline-block
    .nav a .active
        display none
    .nav .router-link-exact-active .active
        display inline-block
    .nav .router-link-exact-active .noactive
        display none
    .nav a span
        display inline-block
        float left
        width 100%
        color #333
        line-height 1.1
    .nav a.router-link-exact-active span
        color #2d8cf0
</style>
